<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CRUD实例</title>
    
    
</head>
<body>
<div id="app"> 
	    <h4>crud demo：</h4>
	<button @click="add()">Add</button>
	<table border="1">
	<tr>
	  <th>姓名</th>
	  <th>年龄</th>
	  <th>性别</th>
	</tr>
	<tr v-for="item in userList">
	  <td>{{ item.name }}</td>
	  <td>{{ item.age }}</td>
	  <td>{{ item.sex }}</td>
	  <td><button @click="edit(item.id)">Edit</button></td>
      <td><button @click="deletePerson(item.id)">Delete</button></td>
	</tr>
	</table>
	
	<div id="d1" style="display:none;">
    <form id="demo" method="post">
        name:<br>
        <input type="text" name="name" id="name" v-model="user.name">
        <br>
        age:<br>
        <input type="text" name="age" id="age" v-model="user.age">
        <br>
        sex:<br>
        <input type="text" name="sex" id="sex" v-model="user.sex">
        <br>
        <br>
            <button v-if="user.id" @click="editPerson(user.id,user.name)">Edit me</button>
            <button v-else="user.id" @click="addPerson()">Add me</button>
    </form>
</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user: {
        
                },
                
                userList:[]
                
            },
            created: function () {
                console.log('my-component created!');
                var _self = this;
                $.ajax({
                    type: 'GET',
                    url: 'api/user/list',
                    success:function(data) {
                    	
                    	 _self.userList = data;
                    }
                });
              },
            methods:{
                add: function(){
                	var _self = this;
                	_self.user= {};
                	$("#d1").css("display","block");
                },
                addPerson: function(){
                	var _self = this;
                	var user = {
                            name:$("#name").val(),
                            age:$("#age").val(),
                            sex:$("#sex").val()
                          };
                    $.ajax({
                        type: 'POST',
                        url: 'api/user/insert',
                        data: user,
                        success:function(data) {
                            
                             alert(data.success);
                        }
                    });
                },
                deletePerson: function(id){
                	var _self = this;
                    $.ajax({
                        type: 'GET',
                        url: 'api/user/delete',
                        data: {id: id},
                        success:function(data) {
                            
                             alert(data.success);
                        }
                    });
                },
                edit: function(id){
                    var _self = this;
                    $.ajax({
                        type: 'GET',
                        url: 'api/user/queryByID',
                        data: {id: id},
                        success:function(data) {
                        	$("#d1").css("display","block");
                        	_self.user=data;
                        }
                    });
                },
                editPerson: function(id,name){
                    var _self = this;
                    $.ajax({
                        type: 'GET',
                        url: 'api/user/update',
                        data: {id: id,name: name},
                        success:function(data) {
                        	alert(data.success);
                        }
                    });
                }
            }
        })
    </script>
</html>
